<template>
    <div class="rootmain">
        <div class="top flex-between">
            <div>
                企业资料
                <span class="backPath" @click="backPath">
                    <i class="el-icon-arrow-left"></i>
                    返回商家中心
                </span>
            </div>
            <div class="pointer" v-if="showInfo" @click="showInfo = false">
                <i class="el-icon-edit"></i>
                <span>编辑</span>
            </div>
        </div>
        <!-- 资料展示页面 -->
        <div class="showInfoPage" v-if="showInfo">
            <el-form
                v-if="serviceInfo"
                class="companyData demo-ruleForm"
                :label-position="labelPosition"
                label-width="115px"
            >
                <el-form-item class="flex" label="企业名称：">
                    <div class="nickName c666">{{ serviceInfo.name }}</div>
                </el-form-item>
                <el-form-item
                    class="formItem flex"
                    label="企业LOGO："
                >
                    <div class="avatar">
                        <img
                            class="avatar cover"
                            :src="serviceInfo.logo"
                            alt=""
                        />
                    </div>
                </el-form-item>
                <el-form-item class="flex" label="企业所在地区：">
                    <div class="c666">{{ serviceInfo.city }}</div>
                </el-form-item>
                <el-form-item class="flex" label="服务类目：">
                    <div class="c666">{{ goodServices }}</div>
                </el-form-item>
                <el-form-item class="flex" label="公司简介：">
                    <div class="c666">{{ serviceInfo.introduce }}</div>
                </el-form-item>
                <el-form-item class="flex" label="联系人：">
                    <div class="nickName c666">{{ serviceInfo.true_name }}</div>
                </el-form-item>
                <el-form-item class="flex" label="联系电话：">
                    <div class="nickName c666">{{ serviceInfo.tel }}</div>
                </el-form-item>
                <el-form-item class="formItem flex-align" label="营业执照：">
                    <img
                        :src="serviceInfo.info_images[0]"
                        class="avatar cover"
                    />
                </el-form-item>
                <el-form-item
                    class="formItem flex-align"
                    label="资质许可证书："
                >
                    <img
                        v-if="serviceInfo.qual_llicense"
                        class="avatar cover"
                        :src="serviceInfo.qual_llicense"
                        alt=""
                    />
                </el-form-item>
            </el-form>
        </div>

        <!-- 编辑页面 -->
        <div class="editInfoPage" v-show="!showInfo">
            <el-form
                class="companyData demo-ruleForm"
                :label-position="labelPosition"
                label-width="122px"
                :rules="rules"
                ref="form"
                :model="form"
            >
                <el-form-item
                    class="flex"
                    label="企业昵称："
                    prop="companyName"
                >
                    <div class="flex">
                        <el-input
                            v-model="form.companyName"
                            type="text"
                        ></el-input>
                    </div>
                </el-form-item>

                <el-form-item
                    class="formItem flex"
                    label="企业LOGO："
                    prop="companyLogo"
                >
                    <div class="flex">
                        <div>
                            <el-upload
                                class="avatar-uploader"
                                :action="imgUploadUrl"
                                :show-file-list="false"
                                :on-success="onSuccess"
                                :auto-upload="true"
                                :headers="header"
                            >
                                <img
                                    v-if="form.companyLogo"
                                    :src="form.companyLogo"
                                    class="avatar"
                                />
                                <img
                                    v-else
                                    src="~/assets/images/service/qyLogo.png"
                                    class="avatar"
                                />
                            </el-upload>
                        </div>
                        <div class="fz12 c999 mt30">
                            注：<br />
                            1.建议上传的图片尺寸为200*200px; <br />
                            2.支持JPG、JPEG、PNG图片格式；<br />
                            3.单张图片最大不超过2M。
                        </div>
                    </div>
                </el-form-item>
                <el-form-item
                    label="企业所在地区："
                    prop="city"
                    class="flex"
                >
                    <el-cascader
                        v-model="cityName"
                        class="select"
                        placeholder="选择企业所在地区"
                        :options="region"
                        :props="regionProps"
                        @change="onAddressChanged"
                        separator="-"
                        clearable
                    ></el-cascader>
                </el-form-item>

                <el-form-item class="flex" label="擅长服务：">
                    <el-input
                        disabled
                        type="text"
                        v-model="goodServices"
                    ></el-input>
                </el-form-item>

                <el-form-item class="flex" label="公司简介：" prop="introduce">
                    <el-input
                        placeholder="不超过100个字符"
                        class="width400"
                        type="textarea"
                        maxlength="100"
                        v-model="form.introduce"
                    ></el-input>
                </el-form-item>

                <el-form-item class="flex" label="联系人：" prop="contacts">
                    <el-input type="text" v-model="form.contacts"></el-input>
                </el-form-item>

                <el-form-item
                    required
                    class="flex"
                    label="联系电话："
                    prop="tel"
                >
                    <el-input v-model="form.tel" type="text"></el-input>
                </el-form-item>

                <el-form-item
                    class="formItem flex-align"
                    label="营业执照："
                    prop="license"
                >
                    <el-upload
                        class="avatar-uploader"
                        :action="imgUploadUrl"
                        :show-file-list="false"
                        :on-success="onSuccess1"
                        :headers="header"
                    >
                        <img
                            v-if="form.license"
                            :src="form.license"
                            class="avatar"
                        />
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>

                <el-form-item
                    class="formItem flex-align"
                    label="资质许可证书："
                >
                    <el-upload
                        class="avatar-uploader"
                        :action="imgUploadUrl"
                        :show-file-list="false"
                        :on-success="onSuccess2"
                        :headers="header"
                    >
                        <img
                            v-if="form.zzLicense"
                            :src="form.zzLicense"
                            class="avatar"
                        />
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <div class="save" @click="submitForm('form')">保存</div>
            </el-form>
        </div>
    </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
import { serviceInfoEdit, getServiceInfo } from "@/assets/api/service";
import region from "@/assets/json/region-just-city.json";
import axios from "axios";
var checkMobile = (rule, value, callback) => {
            if (!value) {
                return callback(new Error("请输入手机号"));
            }
            var reg = /^1[3456789]\d{9}$/;
            if (!reg.test(value)) {
                return callback(new Error("手机号码有误"));
            } else {
                return callback();
            }
        };

export default {
    data() {
        
        return {
            token: "",
            imgUploadUrl: "",
            regionProps: {
                label: "name",
                value: "name",
                children: "children",
            }, // 地区级联选择器配置
            region: [],
            showInfo: true,
            cityName: ["", ""], //服务地址的城市名

            form: {
                companyName: "",
                companyLogo: "",
                city: "",
                introduce: "",
                contacts: "",
                tel: "",
                license: "",
                zzLicense: "",
            },
            labelPosition: "right",
            goodServices: "",
            serviceInfo: null,

            rules: {
                companyName: [
                    {
                        required: true,
                        message: "请输入活动名称",
                        trigger: "blur",
                    },
                ],
                companyLogo: [
                    {
                        required: true,
                        message: "请上传企业logo",
                        trigger: "change",
                    },
                ],
                city: [
                    {
                        required: true,
                        message: "请选择所在地区",
                        trigger: "change",
                    },
                ],
                // goodService: [
                //   { required: true, message: "请输入擅长服务", trigger: "blur" },
                // ],
                introduce: [
                    {
                        required: true,
                        message: "请输入公司简介",
                        trigger: "blur",
                    },
                ],
                contacts: [
                    {
                        required: true,
                        message: "请输入联系人",
                        trigger: "blur",
                    },
                ],
                tel: [{ validator: checkMobile, trigger: "blur" }],
                license: [
                    {
                        required: true,
                        message: "请上传营业执照",
                        trigger: "change",
                    },
                ],
                zzLicense: [
                    {
                        required: true,
                        message: "请上传营业执照",
                        trigger: "change",
                    },
                ],
            },
        };
    },
    computed: {
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
        }),
        //上传图片的请求头
        header() {
            return {
                token: this.token,
            };
        },
    },
    mounted() {
        this.token = localStorage.getItem("token");
        if (this.token) {
            this.getUserInfo();
        } else {
            this.$alert("请登录", "请登录后查看", {
                confirmButtonText: "确定",
                callback: (action) => {
                    this.$router.push({ path: "/" });
                },
            });
        }
        this.init();
    },
    created() {},
    methods: {
        ...mapActions("common", ["getUserInfo"]),

        init() {
            this.imgUploadUrl = axios.defaults.baseURL + "/api/common/upload";
            this.getServiceInfo();

            let regionList = region;
            for (let items of regionList) {
                for (let item of items.children) {
                    delete item.children;
                }
            }
            this.region = regionList;
        },
        //当城市选择结果发生改变时
        onAddressChanged(e) {
            this.form.city = e[0] + "-" + e[1];
            this.cityName = [e[0], e[1]];
        },
        // 获取服务商信息
        async getServiceInfo() {
            let res = await getServiceInfo({
                id: this.userInfo.service_info.id,
            });
            console.log("服务商信息", res);
            if (res.code == 1) {
                this.goodServices = res.data.service_cate_name;
                this.serviceInfo = res.data.info;
                //初始化表格数据
                this.form.companyName = this.serviceInfo.name;
                this.form.companyLogo = this.serviceInfo.logo;
                this.form.city = this.serviceInfo.city;
                this.cityName = this.serviceInfo.city.split("-");
                this.form.introduce = this.serviceInfo.introduce;
                this.form.contacts = this.serviceInfo.true_name;
                this.form.tel = this.serviceInfo.tel;
                this.form.license = this.serviceInfo.info_images[0];
                this.form.zzLicense = this.serviceInfo.qual_llicense;
            } else {
                this.$message({
                    message: res.msg,
                    type: "warning",
                });
            }
        },
        //保存
        submitForm(formName) {
            if (this.showInfo == false) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.serviceInfoEdit();
                    } else {
                        console.log("error submit!!");
                        return false;
                    }
                });
            }
        },
        onSuccess(res, file) {
            this.form.companyLogo = res.data.fullurl;
        },
        onSuccess1(res, file) {
            console.log(res.data.fullurl);

            this.form.license = res.data.fullurl;
        },
        onSuccess2(res, file) {
            this.form.zzLicense = res.data.fullurl;
        },

        //保存
        async serviceInfoEdit() {
            var params = {
                name: this.form.companyName, //企业名称
                logo: this.form.companyLogo,
                // city_code: Number(this.form.city[1]),
                city: this.form.city,
                // goodService: this.form.goodService,
                introduce: this.form.introduce,
                true_name: this.form.contacts, //联系人
                tel: this.form.tel,
                info_images: this.form.license, //营业执照
                qual_llicense: this.form.zzLicense, //资质许可证
            };
            let res = await serviceInfoEdit(params);
            if (res.code == 1) {
                this.$message.success("保存成功");
                this.getServiceInfo();
                this.showInfo = true;
            }
        },

        backPath() {
            this.$router.push({
                path: "/service/servicecenter/Index",
            });
        },
    },
};
</script>

<style lang="scss" scoped>
@import url("@/assets/static/reset.css");

.rootmain {
    background-color: #fff;
    min-height: 460px;

    .top {
        padding: 0 40px;
        width: 100%;
        height: 63px;
        line-height: 63px;
        border-bottom: 1px solid #eaeaea;
    }
    .companyData {
        position: relative;
        // margin-top: 30px;
        padding: 30px;
        background-color: #fff;

        .nickName {
            color: #666666;
        }

        // ::v-deep.el-form-item__content {
        //   margin-left: 40px !important;
        //   display: flex;
        // }

        ::v-deep.el-form-item__label {
            color: #333;
        }
    }
    .edit {
        cursor: pointer;
        position: absolute;
        top: 63px;
        right: 85px;
    }
}

.cover {
    object-fit: cover;
}

.companyData {
    position: relative;
    margin-left: 20px;
    padding: 30px;
    background-color: #fff;

    // .avatar-uploader {
    //   width: 152px;
    //   height: 152px;
    //   border: 1px solid #333;
    // }

    .nickName {
        color: #666666;
    }
    ::v-deep .el-form-item__label {
        color: #333;
    }
    ::v-deep .el-form-item__content {
        margin-left: 0 !important;
        max-width: 760px;
    }
    ::v-deep .el-form-item__content:nth-child(3) .el-form-item__error {
        left: 124px !important;
        margin-left: 124px;
    }
}

.save {
    margin: 0 auto;
    width: 140px;
    height: 42px;
    border-radius: 2px;
    text-align: center;
    line-height: 42px;
    background: #1c87f3;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
}

.avatar-uploader {
    &::v-deep .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        margin-right: 30px;
    }
}
.avatar-uploader {
    &::v-deep .el-upload:hover {
        border-color: #409eff;
    }
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
.backPath {
    font-size: 14px;
    color: #333333;
    line-height: 20px;
    cursor: pointer;
    i {
        padding-left: 5px;
    }
    &:hover {
        opacity: 0.8;
    }
}

.width400{
    width: 400px;
}
</style>